<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="附件信息" name="a">
      <div class="btn-list">
        <el-button type="primary" :icon="UploadFilled" @click="upload"
          >上传附件</el-button
        >
      </div>

      <el-table
        :data="tableData.list"
        stripe
        style="width: 100%"
        border
        header-cell-class-name="table_header"
        :header-cell-style="{ background: '#f8f8f9' }"
      >
        <el-table-column label="序号" type="index" width="100" align="center" />
        <el-table-column
          prop="typeStr"
          label="资源类型"
          width="180"
          align="center"
        />
        <el-table-column
          prop="suffix"
          label="文件类型"
          width="180"
          align="center"
        />
        <el-table-column prop="originalName" label="文件名称" align="center" />

        <el-table-column prop="address" label="上传者" align="center" />
        <el-table-column prop="createTime" label="上传时间" align="center" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" link>预览</el-button>
            <el-button type="warning" link>修改</el-button>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Paging
        :total="total"
        :currentPage.sync="currentPage"
        :pageSize.sync="pageSize"
        @pagination="handlePageChange"
      ></Paging>
    </el-tab-pane>
    <el-tab-pane label="矿区现场图" name="second">Config</el-tab-pane>
  </el-tabs>

  <el-dialog v-model="dialogVisible" title="上传附件" width="58%">
    <el-tabs v-model="activeName1">
      <el-tab-pane label="矿区现场图" name="first">
        <el-upload
          v-model:file-list="fileList"
          action="http://47.96.231.238:8112/upload/uploadFile"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :data="obj"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="附件信息" name="second">
        <el-upload
          class="upload-demo"
          drag
          :action="baseURLFiles"
          :on-success="handleSuccess"
          :before-upload="beforeUploadFile"
          :data="uploadDataObj"
          multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处, <em>或点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              注:允许上传的附件 rar/zip 大小最大为10M
            </div>
          </template>
        </el-upload>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          上传
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { UploadFilled, Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ElNotification, ElMessage } from "element-plus";
// Paging 组件
import Paging from "@/components/basePage/packagePaging/index.vue";
// 引入自定义请求库
import { postAction } from "@/utils/system/commonUse";

// const baseURL: any = import.meta.env.VITE_BASE_URL;
const baseURL: any = "http://47.96.231.238:8112";
const tableData = reactive({
  list: [],
});
const url = reactive({
  getListUrl: "http://47.96.231.238:8112/accessory/queryAccessoryByTypeList",
});
const objList = reactive({
  pid: sessionStorage.getItem("id"),
  typeStrList: ["1000", "1001"],
});
// 条数
const total = ref(0);
// 长度
const pageSize = ref(10);
// 页码
const currentPage = ref(1);

// 分页器
const handlePageChange = (data: any) => {
  console.log("data", data);

  currentPage.value = data.currentPage;
  pageSize.value = data.pageSize;
  // getList();
};
onMounted(() => {
  getList();
});
const getList = () => {
  console.log("getList");

  postAction(
    url.getListUrl,
    Object.assign({ size: pageSize.value, mount: currentPage.value }, objList)
  )
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      tableData.list = data.data.data;
      console.log(data);
    })
    .catch((err) => {
      console.log(err);
    });
};

// /accessory/queryDataByPage
// 弹框
const dialogVisible = ref(false);
// tabs页 绑定切换
const activeName = ref("a");
const activeName1 = ref("first");
// 上传按钮
const upload = () => {
  dialogVisible.value = true;
};
// 图片墙列表
const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  // dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const obj = reactive({
  id: sessionStorage.getItem("id"),
  typeStr: "1001",
});

const uploadDataObj = reactive({
  id: sessionStorage.getItem("id"),
  typeStr: "1000",
});
console.log("process.env.VUE_APP_BASE_API", baseURL);
const baseURLFiles = baseURL + "/upload/uploadFile";

// const uploadUrl =
//   process.env.VUE_APP_BASE_API + "/ResultTable/resultTableAnalysis";

// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
const beforeUploadFile = (file: any) => {
  const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
  // 文件大小
  const size = file.size / 1024 / 1024;

  if (size > 10) {
    ElNotification({
      title: "警告",
      message: `文件大小不得超过10M`,
      type: "warning",
    });
    return false;
  }
};

const handleSuccess = () => {
  getList();
  ElMessage({
    showClose: true,
    message: "上传成功",
    type: "success",
  });
};
</script>

<style lang="scss" scoped>
.btn-list {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0;
}
</style>
